<template>
  <div>
    <el-dialog
      ref="refDlg"
      title="编辑"
      :visible.sync="dialogShow"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="600"
      @close="handleBack"
    >
      <div>
        <el-form ref="refForm" class="financeForm" :rules="formRules" :model="formData" size="mini" label-width="120px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="系列编码:" size="mini" prop="timeLimitClass">
                <span>{{ formData.seriesCode }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="系列名称:" size="mini" prop="timeLimitClass">
                <span>{{ formData.seriesName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属专区:" size="mini" prop="timeLimitClass">
                <span>{{ formData.styleName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="系列类型:" size="mini" prop="timeLimitClass">
                <span>{{ formData.typeName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属专区:" size="mini" prop="style">
                <input-with-dialog
                  v-model="formData.style"
                  :props="{label:'styleName',value:'styleCode'}"
                  :config="styleConfig"
                  @change="styleChange"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属区域:" size="mini" prop="area">
                <input-with-dialog
                  v-model="formData.area"
                  :props="{label:'areaName',value:'areaCode'}"
                  :config="areaConfig"
                  @change="areaChange"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="搭配系列:" size="mini" prop="collocation">
                <input-with-dialog
                  v-model="formData.collocation"
                  :props="{label:'seriesName',value:'seriesCode'}"
                  :config="collocationConfig"
                  @change="collocationChange"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="系列标配色:" size="mini" prop="standardColor">
                <el-input v-model="formData.standardColor" placeholder="请输入系列标配色" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="材质:" size="mini" prop="material">
                <el-input v-model="formData.material" placeholder="请输入材质" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="市场定位:" size="mini" prop="marketPosition">
                <c-dict-select v-model="formData.marketPosition" dict-type-code="MARKET_POSITION" placeholder="市场定位" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="样品编码:" size="mini" prop="sampleCode">
                <el-input v-model="formData.sampleCode" placeholder="请输入样品编码" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="款式形态:" size="mini" prop="styleForm">
                <c-dict-select v-model="formData.styleForm" dict-type-code="STYLE_FORM" placeholder="款式形态" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否参与推广:" size="mini" prop="isPartakeSpread">
                <el-select v-model="formData.isPartakeSpread" :disabled="!formData.enable" size="mini" placeholder="请选择是否参与推广" style="width:100%">
                  <el-option v-for="item in booleansList" :key="item.dictCode" :label="item.dictName" :value="item.dictCode" />
                </el-select>
                <!-- <c-dict-select v-else v-model="formData.isPartakeSpread" dict-type-code="BOOLEANS" placeholder="是否参与推广" /> -->
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="系列推荐级别:" size="mini" prop="recommendLevel">
                <!-- <el-select v-model="formData.isPartakeSpread" :disabled="!formData.enable" size="mini" placeholder="请选择是否参与推广" style="width:100%">
                  <el-option v-for="item in booleansList" :key="item.dictCode" :label="item.dictName" :value="item.dictCode" />
                </el-select> -->
                <c-dict-select v-model="formData.recommendLevel" dict-type-code="RECOMMEND_LEVEL" placeholder="系列推荐级别" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="启用状态:" size="mini" prop="enable">
                <span>{{ formaterData(enableList, formData.enable) }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div slot="footer">
        <el-button size="mini" @click="handleBack">取消</el-button>
        <el-button type="primary" size="mini" @click="submitForm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getDictByPatchType } from '@/api/dataDict'
import { saveSeriesConfig, getSeriesDeatil } from '@/api/basicData'
// import { getUserInfo } from '@/utils/auth'
// import fileUploader from '@/components/importFile'
// import { postConfigAttachmentTemplate, changeFileList } from '@/api/proConfig'
// import { getShopAttachment } from '@/api/decorate'
export default {
  name: 'EditDialog',
  // components: { fileUploader },
  props: {
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    detailData: {
      type: [String, Object],
      default: ''
    }
  },
  data() {
    return {
      booleansList: [
        { dictName: '是', dictCode: 1 },
        { dictName: '否', dictCode: 0 }
      ],
      enableList: [
        { dictName: '启用', dictCode: 1 },
        { dictName: '停用', dictCode: 0 }
      ],
      partakeSpreadList: [],
      formData: {
        style: [],
        area: [],
        collocation: []
      },
      formRules: {
        style: [{ required: true, message: '请选择所属空间/专区' }],
        area: [{ required: true, message: '请选择所属区域' }],
        isPartakeSpread: [{ required: true, message: '请选择是否参与推广' }]
      },
      styleConfig: {
        title: '所属专区',
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/configStyle/page`,
        setting: [
          {
            prop: 'styleCode',
            title: '编码'
          },
          {
            prop: 'styleName',
            title: '名称'
          }
        ],
        filtersRaw: [{ 'id': 'enable', 'property': 'enable', 'operator': '=', 'value': '1' }]
      },
      areaConfig: {
        title: '所属区域',
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/configArea/page`,
        setting: [
          {
            prop: 'areaCode',
            title: '编码'
          },
          {
            prop: 'areaName',
            title: '名称'
          }
        ],
        filtersRaw: [{ 'id': 'enable', 'property': 'enable', 'operator': '=', 'value': '1' }]
      },
      collocationConfig: {
        title: '搭配系列',
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/configSeries/page`,
        setting: [
          {
            prop: 'seriesCode',
            title: '编码'
          },
          {
            prop: 'seriesName',
            title: '名称'
          }
        ],
        filtersRaw: [{ 'id': 'enable', 'property': 'enable', 'operator': '=', 'value': '1' },
          { 'id': 'isPartakeSpread', 'property': 'isPartakeSpread', 'operator': '=', 'value': '1' }]
      }
    }
  },
  computed: {
    dialogShow: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  created() {
    this.getDictByPatchTypeAll(['BOOLEANS']).then(res => {
      this.partakeSpreadList = res.BOOLEANS
    })
    if (this.detailData.id) {
      getSeriesDeatil(this.detailData.id).then(res => {
        if (res.success && res.data) {
          this.formData = res.data
          const filtersRaw = [{ 'id': 'seriesCode', 'property': 'seriesCode', 'operator': '<>', 'value': this.formData.seriesCode },
            { 'id': 'enable', 'property': 'enable', 'operator': '=', 'value': '1' },
            { 'id': 'isPartakeSpread', 'property': 'isPartakeSpread', 'operator': '=', 'value': '1' }]
          this.$set(this.collocationConfig, 'filtersRaw', filtersRaw)
          if (this.formData.bigStyleCode && this.formData.bigStyleName) {
            const style = [{ label: this.formData.bigStyleName, value: this.formData.bigStyleCode }]
            this.$set(this.formData, 'style', style)
          }
          if (this.formData.areaCode && this.formData.areaName) {
            const area = [{ label: this.formData.areaName, value: this.formData.areaCode }]
            this.$set(this.formData, 'area', area)
          }
          if (this.formData.collocationCode && this.formData.collocationName) {
            const collocation = [{ label: this.formData.collocationName, value: this.formData.collocationCode }]
            this.$set(this.formData, 'collocation', collocation)
          }
          if (!this.formData.enable) {
            this.formData.isPartakeSpread = 0
          }
        }
      })
    }
  },
  methods: {
    // 获取数据字典
    async getDictByPatchTypeAll(data) {
      const obj = await getDictByPatchType(data)
        .then(res => {
          return res
        })
      return obj
    },
    // 格式化数据
    formaterData(arr, dictCode) {
      if (!arr || !arr.length) return
      const tmpArr = arr.filter(item => item.dictCode === dictCode)
      if (tmpArr.length) {
        return tmpArr[0].dictName
      }
      return dictCode
    },
    // 选择空间/专区
    styleChange(row) {
      if (row.length) {
        this.formData.bigStyleCode = row[0].styleCode
        this.formData.bigStyleName = row[0].styleName
      } else {
        this.formData.bigStyleCode = ''
        this.formData.bigStyleName = ''
        this.$set(this.formData, 'style', [])
      }
    },
    // 选择所属区域
    areaChange(row) {
      if (row.length) {
        this.formData.areaName = row[0].areaName
        this.formData.areaCode = row[0].areaCode
      } else {
        this.formData.areaName = ''
        this.formData.areaCode = ''
        this.$set(this.formData, 'area', [])
      }
    },
    // 选择搭配系列
    collocationChange(row) {
      if (row.length) {
        this.formData.collocationCode = row[0].seriesCode
        this.formData.collocationName = row[0].seriesName
      } else {
        this.formData.collocationCode = ''
        this.formData.collocationName = ''
        this.$set(this.formData, 'collocation', [])
      }
    },
    // 取消
    handleBack() {
      this.dialogShow = false
      this.clearForm()
    },
    // 清空表单
    clearForm(done) {
      this.formData = {
        style: [],
        area: [],
        collocation: []
      }
      this.$refs.refForm && this.$refs.refForm.clearValidate()
      done && done()
    },
    // 提交
    submitForm() {
      this.$refs.refForm.validate((valid) => {
        if (valid) {
          saveSeriesConfig(this.formData).then(res => {
            if (res.success) {
              this.$message.success('操作成功')
              this.dialogShow = false
              this.clearForm()
              const isNew = !this.formData.id
              this.$emit('success', isNew)
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
